<!-- 床位管理 -->
<template>
  <div class="box">
    <div class="left">
      <el-card style="width: 100%; margin-top: 10px">
        <div class="text">房间列表</div>
        <el-input v-model="houseParams.name" placeholder="房间名称" class="int" @input="search" />

        <el-tree
          style="max-width: 600px"
          :data="getcounts"
          :props="{ label: 'name' }"
          @node-click="handleNodeClick"
        />
      </el-card>
    </div>
    <div class="rgt">
      <el-card style="width: 100%; margin-top: 10px">
        <div class="btns">
          <el-button type="success" @click="add">
            <el-icon class="icon">
              <Plus />
            </el-icon>
            新增床位
          </el-button>
          <el-button type="danger" @click="delAll">
            <el-icon class="icon">
              <Delete />
            </el-icon>
            批量删除
          </el-button>
        </div>

        <el-table
          ref="multipleTableRef"
          :data="bedListData"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="序号" />
          <el-table-column prop="name" label="床位号" />
          <el-table-column prop="" label="入住老人" />
          <el-table-column prop="price" label="床位月价格" />
          <el-table-column prop="addAccountName" label="创建人" />
          <el-table-column prop="addTime" label="创建日期" />
          <el-table-column prop="state" label="状态">
            <template #default="{ row }">
              {{ row.state == 0 ? "未入住" : "已入住" }}
            </template>
          </el-table-column>
          <el-table-column prop="action" label="操作" width="150">
            <template #default="{ row }">
              <el-button :icon="Edit" text size="small" class="btn" @click="uploadEdit(row)">
                编辑
              </el-button>
              <el-button :icon="Delete" text size="small" class="btn" @click="del(row.id)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <!-- 添加 -->
    <bedAdd v-if="dialogVisible" :listParams="listParams" @close="handelClose" />
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
import { buildingList } from "@/api/config/building/building";
import { buildingListData } from "@/api/config/building/type";
import { houseList } from "@/api/config/house/house";
import { listParams } from "@/api/config/house/type";
import { bedList, bedDel, bedDelAll } from "@/api/config/bed/bed";
import { badListParams, badListData, bedAddParams } from "@/api/config/bed/type";
import { buildTree } from "@/utils/treeUtil";
import { Delete, Edit } from "@element-plus/icons-vue";
import bedAdd from "@/components/config/bedAdd.vue";

const dialogVisible = ref(false);

// 楼栋列表
const buildList = ref<buildingListData[]>([]);
const getBuildingList = async () => {
  let res = await buildingList();
  buildList.value = res.list;
  getHouseList();
};

// 床位
const bedParams = reactive<badListParams>({
  houseId: undefined,
  page: 1,
  pageSize: 1000,
});
const bedListData = ref<badListData[]>([]);
const getBedList = async () => {
  let res = await bedList(bedParams);
  // console.log('床位列表', res)
  bedListData.value = res.list;
};

// 房间列表
const houseParams = reactive<listParams>({
  page: 1,
  pageSize: 1000,
  name: "",
  buildingId: undefined,
});
const houselists = ref<any[]>([]);
const getHouseList = async () => {
  let res = await houseList(houseParams);
  // console.log('房间', res);

  houselists.value = res.list.map((item: any) => ({
    id: item.id,
    name: item.name,
    pid: item.buildingId,
  }));

  mergeData([...houselists.value, ...buildList.value]);
};

// 获取房间号id
const handleNodeClick = (data: any) => {
  if (!data.children) {
    bedParams.houseId = data.id;
    listParams.houseName = data.name;
    listParams.houseId = data.id;
    getBedList();
  }
};

// 合并
const getcounts = ref([]);
const mergeData = (data: any) => {
  getcounts.value = buildTree([...houselists.value, ...buildList.value]);
};

// 添加
const listParams = reactive<bedAddParams>({
  id: 0,
  houseId: undefined,
  name: "",
  price: "",
  state: 0,
  houseName: "",
});
const add = () => {
  if (bedParams.houseId) {
    listParams.id = 0;
    listParams.name = "";
    listParams.price = "";
    dialogVisible.value = true;
  } else {
    ElMessage.error("请选择房间号");
  }
};

// 编辑
const uploadEdit = (data: bedAddParams) => {
  Object.assign(listParams, data);
  dialogVisible.value = true;
};

// 删除
const del = (id: number) => {
  ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let res = await bedDel(id);
      ElMessage.success("删除成功");
      getBedList();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除!",
      });
    });
};

// 批量删除
const multipleSelection = ref<number[]>([]);
const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val.map((item) => item.id);
  // console.log(multipleSelection.value);
};
const delAll = async () => {
  if (!multipleSelection.value.length) {
    ElMessage.error("亲，请选择要删除的数据呢");
    return;
  }
  ElMessageBox.confirm("此操作将永久删除该文件, 是否继续?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      let res = await bedDelAll(multipleSelection.value);
      ElMessage.success("删除成功");
      getBedList();
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "已取消删除!",
      });
    });
};

// 搜索
const search = (e: any) => {
  houseParams.page = 1;
  getHouseList();
};

// 关闭弹框
const handelClose = () => {
  dialogVisible.value = false;
  getBedList();
};

onMounted(() => {
  getBuildingList();
});
</script>

<style scoped lang="less">
.box {
  display: flex;
  width: 98%;
  margin: 0 auto;
  justify-content: space-between;

  .left {
    min-width: 15%;

    .text {
      font-size: 14px;
      margin-bottom: 15px;
    }

    .int {
      width: 120px;
      margin-bottom: 15px;
    }
  }

  .rgt {
    min-width: 84%;

    .btns {
      margin-bottom: 20px;
    }

    .btn {
      width: 40px;
      color: rgb(64, 158, 255);
      border: none;
    }

    .btn:last-child {
      color: rgb(245, 108, 127);
    }
  }
}
</style>
